<template>
  <v-menu
    v-model="showChats"
    :close-on-content-click="false"
    class="chats-container"
  >
    <v-card width="320" height="680" class="charts-content">
      <v-toolbar class="card-header" tile dense flat>
        <v-toolbar-title class="title">
          <span v-show="step !== 2">
            {{ currentTitle }}
          </span>
          <v-list class="pa-0" v-if="selectedChatsItem && step === 2">
            <v-list-item>
              <v-list-item-avatar size="18" class="ma-0 mr-3">
                <v-icon class="icon chevron pointer" @click="switchStep(1)"
                  >mdi-chevron-left</v-icon
                >
              </v-list-item-avatar>

              <v-list-item-content class="text-left">
                <v-list-item-title class="name" v-text="selectedChatsItem.name">
                </v-list-item-title>
                <v-list-item-subtitle
                  class="subtitle"
                  v-text="selectedChatsItem.subtitle"
                >
                </v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-toolbar-title>
        <v-spacer></v-spacer>
        <div v-show="step === 1">
          <v-icon @click="switchStep(3)" class="icon mr-4 pointer"
            >mdi-square-edit-outline</v-icon
          >
          <v-icon @click="closeMenu" class="icon chevron pointer"
            >mdi-chevron-up</v-icon
          >
        </div>
        <div v-show="step === 3">
          <v-icon @click="switchStep(1)" class="icon pointer">mdi-close</v-icon>
        </div>
      </v-toolbar>
      <div class="card-content">
        <div class="card-content">
          <ChatsList
            v-show="step === 1"
            @click="showChatBox"
            :item="syncedChatsItems"
          />
          <ChatsRecords v-show="step === 2" :items="records" />
          <NewChat v-show="step === 3" :item="syncedChatsItems" />
        </div>
      </div>
    </v-card>
    <template v-slot:activator="{ on }">
      <v-btn v-on="on" class="chat-btn" fab color="#EB9B31">
        <v-badge color="#D6484E" content="3">
          <v-icon class="chat-icon" color="#fff">mdi-message</v-icon>
        </v-badge>
      </v-btn>
    </template>
  </v-menu>
</template>

<script lang="ts">
import { Vue, Component, PropSync } from "vue-property-decorator";
import ChatsList from "./ChatsList/ChatsList.vue";
import NewChat from "./NewChat/NewChat.vue";
import ChatsRecords from "./ChatsRecords/ChatsRecords.vue";

interface IChatsItem {
  id: string;
  avatar: string;
  name: string;
  subtitle: string;
  time: string;
  unreadNumber?: number;
}

@Component({
  components: {
    ChatsList,
    NewChat,
    ChatsRecords,
  },
})
export default class Chats extends Vue {
  @PropSync("items", { type: Array, default: () => [] })
  syncedChatsItems!: Array<IChatsItem>;

  selectedChatsItem: IChatsItem | null = null;

  records = [
    {
      text: "hello",
      time: "11:29",
      isSelf: true,
      read: false,
    },
    {
      text: "hello",
      time: "11:39",
      isSelf: false,
      read: true,
    },
  ];

  showChats = false;

  step = 1;

  showChatBox(chatsItem: IChatsItem) {
    this.selectedChatsItem = chatsItem;
    this.switchStep(2);
  }

  switchStep(step: number) {
    this.step = step;
  }

  get currentTitle() {
    switch (this.step) {
      case 1:
        return "Chats";
      case 3:
        return "New Chat";
      default:
        return "";
    }
  }

  closeMenu() {
    this.showChats = false;
    this.step = 1;
  }
}
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
